<template>
	<view>
		<view id="head">
			<view class="iconfont icon-xiangzuo1" @click="goback"></view>
			<view class="headtext">我的资料</view>
			<view class="headicon">
				<text class="iconfont icon-shenqing" @click="chanegpro"></text>
			</view>
		</view>
		<view id="mian">
			<view class="itemlist">
				<view class="itemtit">
					<text class="iconfont icon-fuzhushuxian" id="blueline"></text>
					<text>基本资料</text>
					<view class="hr"></view>
				</view>
				<view>
					<view class="item">
						<view class="space-between">
							<text>姓名</text>
							<text>{{admindate.name}}</text>
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>工号</text>
							<text>{{admindate.work_id}}</text>
						</view>
						<view class="hr"></view>
					</view>
					<view class="item1">
						<view id="aboutimg">
							<view>头像</view>
							<!-- <view><canvas style="width:300px;height:300px" canvas-id="actReview"></canvas></view> -->
							<view class="mytx">
								<image :src="img" mode=""></image>
							</view>
							<!-- <text>{{admindate.figure}}</text> -->
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>入职时间</text>
							<text>{{admindate.time}}</text>
						</view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>员工类型</text>
							<text>{{admindate.type}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="itemlist">
				<view class="itemtit">
					<text class="iconfont icon-fuzhushuxian" id="blueline"></text>
					<text>职位信息</text>
					<view class="hr"></view>
				</view>
				<view>
					<view class="item">
						<view class="space-between">
							<text>所属部门</text>
							<text>{{admindate.department_name}}</text>
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>岗位</text>
							<text>{{admindate.post_name}}</text>
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>直接上级</text>
							<text>{{admindate.superior}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="itemlist">
				<view class="itemtit">
					<text class="iconfont icon-fuzhushuxian" id="blueline"></text>
					<text>个人信息</text>
					<view class="hr"></view>
				</view>
				<view>
					<view class="item">
						<view class="space-between">
							<text>性别</text>
							<text>{{admindate.sex}}</text>
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>联系电话</text>
							<text>{{admindate.phone}}</text>
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>地址</text>
							<text>{{admindate.address}}</text>
						</view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>身份证号</text>
							<text>{{admindate.idcard}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	import $http from '../../utils/http.js'
	export default {
		setup() {
			let data = reactive({
				tabledate: [],
				admindate: [],
				meetroomdate: [],
				img: '',
				getdate: () => {
					$http({
						url: '/Meetmanagement/admin/get',
						method: 'post',
						data: {
							'userid': '200001'
						}
					}).then((res) => {
						data.admindate = res.data.data[0]
						console.log(res)
						console.log(data.admindate)
						data.img = data.admindate.figure
					})
				},
				goback: () => {
					uni.navigateBack({
						delta: 1
					})
				},
				chanegpro: () => {
					uni.navigateTo({
						url: '../profilechange/profilechange'
					});
				}
			})

			onMounted((option) => {
				// console.log(option)
				data.getdate()
			})
			return {
				...toRefs(data)
			}
		},
		// const ctx = uni.createCanvasContext('actReview')
		onShow() {
			// console.log(option)
			this.getdate()
		}
	}
</script>

<style>
	@import url("~@/static/font/iconfont.css");

	#mian {
		background-color: #F2F2F2;
		padding: 24rpx 36rpx;
	}

	#head {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		padding: 0rpx 36rpx;
		align-items: center;


	}

	.headtext {
		font-size: 40rpx;
	}

	.icon-xiangzuo1 {
		font-size: 50rpx;
	}

	.headicon>text {
		font-size: 50rpx;
		margin: 0 15rpx;
	}

	.itemlist {
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 0 30rpx;
		margin-bottom: 24rpx;
	}

	.item {
		height: 100rpx;
		/* line-height: 100rpx; */
		/* display: flex; */
		/* align-items: center; */
	}

	.itemtit {
		height: 100rpx;
		line-height: 100rpx;
	}

	.meetimg {
		width: 200rpx;
		height: 120rpx;
	}

	#blueline {
		color: #0000FF;
	}

	.space-between {
		display: flex;
	}

	.space-between>text:nth-of-type(1) {
		flex: 1;
	}

	.space-between>text:nth-of-type(2) {
		flex: 2;
	}

	#aboutimg {
		display: flex;
		/* justify-content:space-between; */
		align-items: center;
		padding: 20rpx;
	}

	/* 	#aboutimg image{
		flex: 2;
	} */
	#aboutimg>view:nth-of-type(1) {
		flex: 1;
	}

	#aboutimg>view:nth-of-type(2) {
		flex: 3;
	}

	.hr {
		/* height: 1rpx;
		background-color: #F5F2F0; */
	}

	.mytx image {
		height: 200rpx;
		width: 260rpx;
	}
</style>
